<!--
 * @Description: 
 * @version: 
 * @Author: 171
 * @Date: 2022-09-01 16:56:25
 * @LastEditors: 171
 * @LastEditTime: 2022-09-22 19:10:53
-->

<script setup lang='ts'>
  import { onMounted, ref, computed } from 'vue';

  const vWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  const year = ref<number>(0);
  const month = ref<number>(0);
  const day = ref<number>(0);
  const hours = ref<number>(0);
  const minutes = ref<number>(0);
  const seconds = ref<number>(0);
  const vWeek_s = ref<number>(0);

  function time() {
    const date =  new Date();
    year.value = date.getFullYear();
    month.value = date.getMonth() + 1;
    day.value = date.getDate();
    hours.value = date.getHours();
    minutes.value = date.getMinutes();
    seconds.value = date.getSeconds();
    vWeek_s.value = date.getDay();
  };
  setTimeout(function fn(): any {
    time();
    return setTimeout(fn, 1000);
  }, 0);
  
  const currentDate = computed<string>(()=>{ 
    return year.value + "." + month.value + "." + day.value
  })

  const currentTime = computed<string>(()=>{ 
    return hours.value + ":" + minutes.value.toString().padStart(2, '0') + ":" + 
      seconds.value.toString().padStart(2, '0')
  })

  const currentWeekday = computed<string>(()=>{ 
    return vWeek[vWeek_s.value];
  })

  onMounted(() => {
    window.WIDGET = {
      "CONFIG": {
        "layout": "1",
        "borderRadius": "5",
        "width": "450",
        "height": "150",
        "background": "1",
        "dataColor": "FFFFFF",
        "key": "b53401a562a04677bab388e4da821942"
      }
    };
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
    document.body.appendChild(s);
  })
</script>

<template>

  <div>
    <div class="time text-opacity-50 text-gray-50">
      <div style="font-size:50px; font-family: Old English Text MT;">
        {{ currentDate }} {{ currentWeekday }}
      </div>
      <div style="font-size:120px; font-family: Algerian;">{{ currentTime }}</div>
      <div id="he-plugin-standard"></div>
    </div>
    
    
  </div>

</template>

<style lang='less' scoped>
  .time{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    align-items: center;
    
    flex-direction: column;
  }
</style>
